<template>
    <div>
        {{ data }}
        <button @click="handleClick">点我更新数据</button>
        <Child v-if="show"></Child>
    </div>
</template>

<script>
import { onBeforeMount, onBeforeUpdate, onMounted, onUpdated, ref } from 'vue';
import Child from './Child.vue';

export default {
    components: {
        Child
    },
    setup() {
        const data = ref("初始数据")
        const show = ref(true)

        const handleClick = () => {
            data.value = "更新后的数据"
            show.value = false
        }

        onBeforeMount(() => {
            console.log("onBeforeMount执行了");
        })

        onMounted(() => {
            console.log("onMounted执行了");
        })

        onBeforeUpdate(() => {
            console.log("onBeforeUpdate执行了");
        })

        onUpdated(() => {
            console.log("onUpdated执行了");
        })

        return {
            data,
            show,
            handleClick
        }
    },
}
</script>